<template>
  <div>
    <avue-crud
      ref="crud"
      :page="page"
      :data="tableData"
      :permission="permissionList"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getPageF"
      @refresh-change="refreshChange"
      @row-update="handleUpdate"
      @row-save="handleSave"
      @row-del="handleDel"
      @sort-change="sortChange"
      @search-change="searchChange"
    >
      <template #appName="scope">
        <el-tag type="success" size="small">{{ scope.row.appName }}</el-tag>
      </template>
      <template #nickName="scope">
        <el-badge :value="scope.row.countMsg" class="count-msg">
          <img class="head-img" :src="scope.row.headimgUrl" />
          <div class="nick-name">{{ scope.row.nickName }}</div>
        </el-badge>
      </template>
      <template #readFlag="scope">
        <el-tag :type="scope.row.readFlag == '1' ? 'success' : 'danger'" size="small">{{ scope.row.$readFlag }}</el-tag>
      </template>
      <template #repContent="scope">
        <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'subscribe'">
          <el-tag type="success" size="small">关注</el-tag>
        </div>
        <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'unsubscribe'">
          <el-tag type="danger" size="small">取消关注</el-tag>
        </div>
        <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'CLICK'"><el-tag size="small">点击菜单</el-tag>：【{{ scope.row.repName }}】</div>
        <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'VIEW'"><el-tag size="small">点击菜单链接</el-tag>：【{{ scope.row.repUrl }}】</div>
        <div v-if="scope.row.repType == 'event' && scope.row.repEvent == 'scancode_waitmsg'">
          <el-tag size="small">扫码结果：</el-tag>：【{{ scope.row.repContent }}】
        </div>
        <div v-if="scope.row.repType == 'text'">{{ scope.row.repContent }}</div>
        <div v-if="scope.row.repType == 'image'">
          <a target="_blank" :href="scope.row.repUrl"><img :src="scope.row.repUrl" style="width: 100px" /></a>
        </div>
        <div v-if="scope.row.repType == 'voice'">
          <WxVoicePlayer :objData="scope.row"></WxVoicePlayer>
        </div>
        <div v-if="scope.row.repType == 'video'">
          <WxVideoPlayer :objData="scope.row" style="margin-top: 40px"></WxVideoPlayer>
        </div>
        <div v-if="scope.row.repType == 'shortvideo'">
          <WxVideoPlayer :objData="scope.row" style="margin-top: 40px"></WxVideoPlayer>
        </div>
        <div v-if="scope.row.repType == 'link'">
          <el-tag size="small">链接</el-tag>：<a :href="scope.row.repUrl" target="_blank">{{ scope.row.repName }}</a>
        </div>
      </template>
      <template #menu="scope">
        <el-button link icon="el-icon-chat-line-round" type="primary" plain @click="wxMsgDo(scope.row, scope.index)">消息</el-button>
      </template>
    </avue-crud>
    <el-dialog title="用户消息" v-model="dialogMsgVisible" width="700px">
      <WxMsg :wxUserId="wxUserId" v-if="dialogMsgVisible"></WxMsg>
    </el-dialog>
  </div>
</template>

<script setup name="WxMpMsg">
import { getPage, getObj, addObj, putObj, delObj } from '@/api/wxmp/wxmsg'
import { tableOption } from '@/const/crud/wxmp/wxmsg'
import { checkPermi, checkRole } from '@/utils/permission'
import WxMsg from '@/components/wx-msg/main.vue'
import WxVideoPlayer from '@/components/wx-video-play/main.vue'
import WxVoicePlayer from '@/components/wx-voice-play/main.vue'

const { proxy } = getCurrentInstance()

const data = reactive({
  dialogMsgVisible: false,
  tableData: [],
  page: {
    total: 0, // 总页数
    currentPage: 1, // 当前页数
    pageSize: 20, // 每页显示多少条
    ascs: [], //升序字段
    descs: 'create_time' //降序字段
  },
  paramsSearch: {},
  tableLoading: false,
  wxUserId: ''
})
const { tableData, tableLoading, page, dialogMsgVisible, wxUserId } = toRefs(data)

const permissionList = computed(() => {
  return {
    addBtn: checkPermi(['wxmp:wxmsg:add']),
    delBtn: checkPermi(['wxmp:wxmsg:del']),
    editBtn: checkPermi(['wxmp:wxmsg:edit']),
    viewBtn: checkPermi(['wxmp:wxmsg:get'])
  }
})

function wxMsgDo(row) {
  data.wxUserId = row.wxUserId
  data.dialogMsgVisible = true
  row.readFlag = '1'
}

function searchChange(params, done) {
  params = proxy.filterForm(params)
  data.paramsSearch = params
  data.page.currentPage = 1
  getPageF(data.page, params)
  done()
}

function sortChange(val) {
  const prop = val.prop ? val.prop.replace(/([A-Z])/g, '_$1').toLowerCase() : ''
  if (val.order == 'ascending') {
    data.page.descs = []
    data.page.ascs = prop
  } else if (val.order == 'descending') {
    data.page.ascs = []
    data.page.descs = prop
  } else {
    data.page.ascs = []
    data.page.descs = []
  }
  getPageF(data.page)
}

function getPageF(page, params) {
  data.tableLoading = true
  getPage(
    Object.assign(
      {
        current: page.currentPage,
        size: page.pageSize,
        descs: data.page.descs,
        ascs: data.page.ascs,
        type: '1'
      },
      params,
      data.paramsSearch
    )
  )
    .then((response) => {
      data.tableData = response.data.records
      data.page.total = response.data.total
      data.page.currentPage = page.currentPage
      data.page.pageSize = page.pageSize
      data.tableLoading = false
    })
    .catch(() => {
      data.tableLoading = false
    })
}

function handleDel(row, index) {
  proxy
    .$confirm('是否确认删除此数据', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return delObj(row.id)
    })
    .then(() => {
      proxy.$message({
        showClose: true,
        message: '删除成功',
        type: 'success'
      })
      getPageF(data.page)
    })
    .catch(() => {})
}

function handleUpdate(row, index, done, loading) {
  putObj(row)
    .then(() => {
      proxy.$message({
        showClose: true,
        message: '修改成功',
        type: 'success'
      })
      done()
      getPageF(data.page)
    })
    .catch(() => {
      loading()
    })
}

function handleSave(row, done, loading) {
  addObj(row)
    .then(() => {
      proxy.$message({
        showClose: true,
        message: '添加成功',
        type: 'success'
      })
      done()
      getPageF(data.page)
    })
    .catch(() => {
      loading()
    })
}

function refreshChange(page) {
  getPageF(data.page)
}
</script>

<style lang="scss" scoped>
.head-img {
  width: 50px;
}
</style>
